var TreeSvg = []
var aqiTreeSvg = d3.select('#aqiTree').append('svg').attr('width', '98%').attr('height', '100%')
var so2TreeSvg = d3.select('#so2Tree').append('svg').attr('width', '98%').attr('height', '100%')
var o3_24hTreeSvg = d3.select('#o3_24hTree').append('svg').attr('width', '98%').attr('height', '100%')
var pm25TreeSvg = d3.select('#pm25Tree').append('svg').attr('width', '98%').attr('height', '100%')
var so2_24hTreeSvg = d3.select('#so2_24hTree').append('svg').attr('width', '98%').attr('height', '100%')
var o3_8hTreeSvg = d3.select('#o3_8hTree').append('svg').attr('width', '98%').attr('height', '100%')
var pm25_24hTreeSvg = d3.select('#pm25_24hTree').append('svg').attr('width', '98%').attr('height', '100%')
var no2TreeSvg = d3.select('#no2Tree').append('svg').attr('width', '98%').attr('height', '100%')
var o3_8h_24hTreeSvg = d3.select('#o3_8h_24hTree').append('svg').attr('width', '98%').attr('height', '100%')
var pm10TreeSvg = d3.select('#pm10Tree').append('svg').attr('width', '98%').attr('height', '100%')
var no2_24hTreeSvg = d3.select('#no2_24hTree').append('svg').attr('width', '98%').attr('height', '100%')
var coTreeSvg = d3.select('#coTree').append('svg').attr('width', '98%').attr('height', '100%')
var pm10_24hTreeSvg = d3.select('#pm10_24hTree').append('svg').attr('width', '98%').attr('height', '100%')
var o3TreeSvg = d3.select('#o3Tree').append('svg').attr('width', '98%').attr('height', '100%')
var co_24hTreeSvg = d3.select('#co_24hTree').append('svg').attr('width', '98%').attr('height', '100%')
TreeSvg.push(aqiTreeSvg)
TreeSvg.push(pm25TreeSvg)
TreeSvg.push(pm25_24hTreeSvg)
TreeSvg.push(pm10TreeSvg)
TreeSvg.push(pm10_24hTreeSvg)
TreeSvg.push(so2TreeSvg)
TreeSvg.push(so2_24hTreeSvg)
TreeSvg.push(no2TreeSvg)
TreeSvg.push(no2_24hTreeSvg)
TreeSvg.push(o3TreeSvg)
TreeSvg.push(o3_24hTreeSvg)
TreeSvg.push(o3_8hTreeSvg)
TreeSvg.push(o3_8h_24hTreeSvg)
TreeSvg.push(coTreeSvg)
TreeSvg.push(co_24hTreeSvg)

function clearTree() {
    for(let i = 0; i < TreeSvg.length; i++) {
        TreeSvg[i].selectAll("*").remove()
    }
}

const treemap = d3.treemap().size([166, 67])
function drawTree() {
    for(let i = 0; i < 15; i++) {

        TreeSvg[i].selectAll("*").remove()
        data = levels['level'][`levelHour${i}`]
        
        const root = d3.hierarchy(data).sum((d) => d.value)
        const tree = treemap(root)
        const leaves = tree.leaves()
        const g = TreeSvg[i].selectAll('.rects')
            .data(leaves)
            .enter()
            .append('g')
            .attr('class', 'rects')
        // 添加矩阵
        g.append('rect')
            .attr('x', (d) => d.x0)
            .attr('y', (d) => d.y0)
            .attr('width', (d) => (d.x1 - d.x0))
            .attr('height', (d) => (d.y1 - d.y0))
            .style('fill', (d) => {
                if(i == 0) {
                    return topColor(d.value)
                }
                if(i == 1 || i == 2) {
                    return pm25Color(d.value)
                }
                if(i == 3 || i ==4) {
                    return pm10Color(d.value)
                }
                if(i == 5 || i == 6) {
                    return so2Color(d.value)
                }
                if(i == 7 || i ==8) {
                    return no2Color(d.value)
                }
                if(i == 9 || i ==10 || i ==11 || i == 12) {
                    return o3Color(d.value)
                }
                if(i == 13 || i ==14) {
                    return coColor(d.value)
                }
            })
            .style('stroke', '#cccccc')
        // 添加描述
        g.append('title')
            .text((d) => { return d.data.name })
    }
}